﻿<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
    <!--<![endif]-->

    <head>
        <meta charset="utf-8" />
        <title>SuperMgr前端框架</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <meta content="" name="description" />
        <meta content="" name="author" />
        <!--全局通用框架样式 begin-->
        <!-- 全局基本样式 -->

        <link href="../content/superui/min/css/superui.common.min.css" rel="stylesheet" />
        <!-- 全局主题样式 -->
        <link href="../content/superui/global/css/components.min.css" id="style_components" rel="stylesheet" />
        <link href="../content/superui/pages/layouts/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color" />
        <!--全局通用框架样式 end-->
    </head>

    <body>
        <div class="page-container">
            <div class="page-content">
                <div class="row">
                    <div class="col-md-12">
                        <div class="note note-success">
                            <h4 class="block">Bootbox对话框</h4>
                            <p> Bootbox.js 是一个Bootstrap modals风格的对话框。 </p>
                            <p> 详情请查看相关官网。
                                <a href="http://bootboxjs.com/" class="btn btn-outline red" target="_blank"> 官方网站</a>
                            </p>
                        </div>
                        <!-- BEGIN PORTLET-->
                        <div class="portlet light bordered">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="icon-social-dribbble font-blue-sharp"></i>
                                    <span class="caption-subject font-blue-sharp bold uppercase">Bootbox案例</span>
                                </div>
                                <div class="actions">
                                    <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                        <i class="icon-cloud-upload"></i>
                                    </a>
                                    <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                        <i class="icon-wrench"></i>
                                    </a>
                                    <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                        <i class="icon-trash"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <table class="table table-hover table-striped table-bordered">
                                    <tr>
                                        <td> 基本alert弹出框 </td>
                                        <td>
                                            <a class="btn blue btn-outline sbold uppercase" id="demo_1">查看demo </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td> 带回调callback的alert </td>
                                        <td>
                                            <a class="btn red btn-outline sbold uppercase" id="demo_2">查看demo </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td> 确认框 </td>
                                        <td>
                                            <a class="btn yellow btn-outline sbold uppercase" id="demo_3">查看demo </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td> 输入框 </td>
                                        <td>
                                            <a class="btn green btn-outline sbold uppercase" id="demo_4">查看demo </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>自定义弹出框 </td>
                                        <td>
                                            <a class="btn dark btn-outline sbold uppercase" id="demo_5">查看demo </a>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <!-- END PORTLET-->
                    </div>
                </div>
            </div>
            <!-- END CONTENT BODY -->
        </div>
        <!--[if lt IE 9]>
    <script src="../content/superui/base/base-core/excanvas.min.js"></script>
    <script src="../content/superui/base/base-core/respond.min.js"></script>
    <![endif]-->
        <!-- 全局公共类库Begin -->
        <script src="../content/superui/min/js/superui.common.min.js"></script>
        <script src="../content/plugins/bootbox/bootbox.min.js"></script>

    </body>
<script>
    $(function() {
        $('#demo_1').click(function() {
            bootbox.alert("Hello world!");
        });
        //end #demo_1

        $('#demo_2').click(function() {
            bootbox.alert("Hello world!", function() {
                alert("Hello world callback");
            });
        });
        //end #demo_2

        $('#demo_3').click(function() {
            bootbox.confirm("Are you sure?", function(result) {
                alert("Confirm result: " + result);
            });
        });
        //end #demo_3

        $('#demo_4').click(function() {
            bootbox.prompt("What is your name?", function(result) {
                if (result === null) {
                    alert("Prompt dismissed");
                } else {
                    alert("Hi <b>" + result + "</b>");
                }
            });
        });
        //end #demo_6

        $('#demo_5').click(function() {
            bootbox.dialog({
                message: "I am a custom dialog",
                title: "Custom title",
                buttons: {
                    success: {
                        label: "Success!",
                        className: "green",
                        callback: function() {
                            alert("great success");
                        }
                    },
                    danger: {
                        label: "Danger!",
                        className: "red",
                        callback: function() {
                            alert("uh oh, look out!");
                        }
                    },
                    main: {
                        label: "Click ME!",
                        className: "blue",
                        callback: function() {
                            alert("Primary button");
                        }
                    }
                }
            });
        });
    });
</script>
</html>